<template>
  <!--  <div>-->
  <!--    <YkMenu ref="menu" :options="template" :height="menuHeight" v-if="displayMenu" :user="user"-->
  <!--            @card-event="handleEvent" button1-text="充值">-->
  <!--    </YkMenu>-->
  <!--    <YkContent ref="content" :menu-bar-height="menuHeight" :task-bar-height="taskHeight">-->
  <!--      <router-view v-slot="{ Component }">-->
  <!--        <component ref="child" :is="Component"></component>-->
  <!--      </router-view> &lt;!&ndash; 这里将渲染当前路由对应的组件 &ndash;&gt;-->
  <!--    </YkContent>-->
  <!--    <YkTaskBar v-if="displayMenu" :height="taskHeight">-->
  <!--      <div>任务栏</div>-->
  <!--    </YkTaskBar>-->
  <!--  </div>-->

  <div class="flex flex-col gap-0 h-full">
    <YkMenu ref="menu" :options="template" v-if="displayMenu" :user="user" :height="24" :title-width="50"
            @card-event="handleEvent" button1-text="充值" class="YkMenu">
    </YkMenu>
    <YkContent ref="content" class="YkContent flex-1">
      <router-view v-slot="{ Component }">
        <component ref="child" :is="Component"></component>
      </router-view> <!-- 这里将渲染当前路由对应的组件 -->
    </YkContent>
    <YkTaskBar v-if="displayMenu" class="YkTaskBar h-6 flex-none">
      <div>任务栏</div>
    </YkTaskBar>
  </div>
</template>

<script setup lang="ts">
import router from './router.ts'
// import YkMenu, { menuOptionsType } from '../packages/components/YkMenu/YkMenu.vue'
import YkMenu, { menuOptionsType } from '../packages/components/YkMenu/YkMenuStatic.vue'
import YkContent from '../packages/components/YkContent/YkContentStatic.vue'
import { save_file, importData } from '@/utils.js'
import YkTaskBar from '../packages/components/YkTaskBar/YkTaskBarStatic.vue'
import { computed, inject, onMounted, provide, ref } from 'vue'
import { Emitter } from 'mitt'
import { storeToRefs } from 'pinia'
import { useYklibLoginStore } from '../packages/index.ts'

const { user, projectName } = storeToRefs(useYklibLoginStore())

let child = ref()
const mitt: Emitter<any> | undefined = inject('mitt')
const content = ref<InstanceType<typeof YkContent>>()

provide('getColors', () => {
  return {
    fgColor: '#000',
    bgColor: '#fff',
    buttonNormalColor: '#f8d7da',
    buttonHoverColor: '#90ee90'
  }
})
const menu = ref<InstanceType<typeof YkMenu>>()


const menuHeight = computed(() => {
  if (router.currentRoute.value.name && router.currentRoute.value.name !== 'Login') {
    return 30
  } else {
    return 0
  }
})

const taskHeight = computed(() => {
  if (router.currentRoute.value.name && router.currentRoute.value.name !== 'Login') {
    return 24
  } else {
    return 0
  }
})

const displayMenu = computed(() => {
  if (router.currentRoute.value.name && router.currentRoute.value.name !== 'Login') {
    return true
  } else {
    return false
  }
})

const template: menuOptionsType[] = [
  {
    label: '文件',
    submenu: [
      {
        label: '打开...',
        key: '打开',
        click: () => {
          importData((str: string) => {
            if (!str) { // 点击了取消按钮
              return
            }
            let proj = JSON.parse(str)
            let currentPage = proj['currentPage'] || 'SgesCalA'
            if (currentPage === 'EbsFlow') {
              mitt?.emit('loadGraphData', proj)
            } else {
              localStorage.setItem('storeSgesCalA', proj.storeSgesCalA) // 将数据恢复到localStorage
              localStorage.setItem('storeSgesCalC', proj.storeSgesCalC) // 将数据恢复到localStorage
              router.push(currentPage) // 跳转到对应页面
              localStorage.setItem('currentPage', currentPage)
              location.reload()  // 刷新页面，加载localStorage中的数据
            }
          }, ['.ebsFlow', '.txt', '.dat', '.json', '.csv'])
        }   // 点击事件，需要传入函数对象，electron可以在此处指定点击事件
      },
      {
        type: 'separator'
      },
      {
        label: '保存到本地...',
        key: '保存到本地',
        click: () => {
          const routeName = router.currentRoute.value.name
          if (routeName === 'EbsFlow') { // 保存EbsFlow数据
            mitt?.emit('saveGraphData')
          } else if (child.value.persistData) {
            child.value.persistData()
            let _1 = { 'storeSgesCalC': localStorage.getItem('storeSgesCalC') }
            _1['storeSgesCalA'] = localStorage.getItem('storeSgesCalA')
            _1['currentPage'] = localStorage.getItem('currentPage')
            let json_str = JSON.stringify(_1)
            save_file(json_str)
          }
        }
      },
      {
        label: '清除缓存',
        key: '清除缓存',
        click: () => {
          localStorage.clear()
        }
      },
      {
        label: '同步运行数据',
        key: '同步运行数据',
        click: () => {

        }
      },
      {
        label: '导入设计工况',
        key: '导入设计工况',
        click: () => {

        }
      },
      {
        label: '打开终端',
        click: () => {
          if (content.value) {
            content.value.openDrawer()
          }
        }
      },
      {
        label: '关于',
        key: '关于',
        click: () => {

        }
      },
      {
        label: '退出',
        role: 'quit'
      }
    ]
  },
  {
    label: '工具',
    submenu:
      [
        {
          label: 'EbsFlow',
          key: 'EbsFlow',
          click: () => {
            localStorage.setItem('currentPage', 'EbsFlow')
            projectName.value = 'EbsFlow'
            router.push('EbsFlow')
          }
        },
        // {
        //   label: 'VueFlow',
        //   key: 'VueFlow',
        //   click: () => {
        //     localStorage.setItem('currentPage', 'VueFlow')
        //     router.push('VueFlow')
        //   }
        // },
        {
          label: 'UserCard',
          key: 'UserCard',
          click: () => {
            localStorage.setItem('currentPage', 'UserCard')
            projectName.value = 'UserCard'
            router.push('UserCard')
          }
        },
        // {
        //   label: 'Video',
        //   key: 'Video',
        //   click: () => {
        //     localStorage.setItem("currentPage", "Video")
        //     router.push('Video')
        //   }
        // },
        {
          type: 'separator'
        },
        {
          label: '储能系统成本计算',
          key: '储能系统成本计算',
          click: () => {
            projectName.value = '储能系统成本计算'
            localStorage.setItem('currentPage', 'Canvas')

          }
        },
        // {
        //   label: '储能塔架设计',
        //   key: '储能塔架设计',
        //   click: () => {
        //
        //   }
        // },
        // {
        //   label: '承托结构设计',
        //   key: '承托结构设计',
        //   click: () => {
        //
        //   }
        // },
        // {
        //   label: '钢丝绳强度计算',
        //   key: '钢丝绳强度计算',
        //   click: () => {
        //
        //   }
        // },
        {
          label: '轴系强度计算',
          key: '轴系强度计算',
          click: () => {

          }
        }, {
        label: '设为参考工况',
        key: '设为参考工况',
        click: () => {

        }
      }
        // {
        //   label: '网盘（ipv4）',
        //   key: 'diskV4',
        //   click: () => {
        //     window.open('http://sges.yangke.site:20010', '_blank')
        //   }
        // },
        // {
        //   label: '中转页面',
        //   key: 'TempPage',
        //   click: () => {
        //     router.push('TempPage')
        //   }
        // },
        // {
        //   label: '网盘（ipv6）',
        //   key: 'diskV6',
        //   click: () => {
        //     window.open('http://disk.yangke.site:20010', '_blank')
        //   }
        // }
      ]
  }
  ,
  {
    label: '查询',
    submenu:
      [
        {
          label: '全国各省峰谷电价信息',
          key: '全国各省峰谷电价信息',
          click: () => {
            router.push('/PricePower')
          }
        },
        {
          label: '储能系统成本计算',
          key: '储能系统成本计算',
          click: () => {
            router.push('/debug')
          }
        }

      ]
  }

]
const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
const handleEvent = async (buttonInfo: string[], event: PointerEvent) => {
  const buttonId = buttonInfo[0] // 按钮的id
  const buttonText = buttonInfo[1] // 按钮的文本
  if (buttonId === '1') {
    // 说明点击了个人信息卡片上的第一个大按钮
    // event.preventDefault()
  }
  return true
}

</script>

<style>
html, body, #app {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
</style>